<template>
	<view class="container bg-gray">
		<view class="width">
			<view class="productlist">
				<view class="productitem" 
					@click="jump(item.url)"
					v-for="(item,index) in list" 
					:key='index'>
					<view class="ceng">
						<view class="circleimg flex-row-center">
							{{ item.name }}
							<image src="https://www.haopengsong.xyz/static/index/circle.png" class="circle"></image>
						</view>
					</view>
					<view class="itembox">
						<image
						    class="bgimg"
							:src="item.path" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import storage from "@/utils/storage.js";
import { info } from "@/api/login";
export default {
	data() {
		return {
			list:[
				{ name:'户型', url:'/pages/product/huproduct',path:'https://www.haopengsong.xyz/static/type/hxtype1.png' },
				{ name:'设计理念', url:'/pages/product/detail',path:'https://www.haopengsong.xyz/static/type/hxtype2.png'  },
				{ name:'适老化设计', url:'/pages/product/detailsheji',path:'https://www.haopengsong.xyz/static/type/hxtype3.png'  },
			]
		};
	},
	components: {
		
	},
	/**
	 * 页面加载
	 */
	onLoad() {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/**去除scroll-view的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.circle{
	width: 20px;
	height: 20px;
	margin-left: 5px;
}
.bgimg{
	width: 100%;
	height: 160px;
}
.productitem{
	position: relative;
	height: 160px;
	border-radius: 9px;
	overflow: hidden;
	margin-bottom: 10px;
	.itembox,.ceng{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 2;
	}
	.ceng{
		z-index: 3;
		background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #ffffff85 100%);
		.circleimg{
			height: 160px;
			color:#fff;
			font-size: 18px;
		}
	}
}
</style>